.card {
  padding: 0;
  border-radius: 5px;
  border: 1px solid #dddddd;

  >h2 {
    font-weight: bold;
    padding: 5px 15px;
    border-bottom: 1px solid #dddddd;
  }

  &.primary {
    border-color: #0d6efd;

    >h2 {
      color: #fff;
      background-color: #0d6efd;
      border-color: #0d6efd;
    }
  }

  &.secondary {
    border-color: #6c757d;

    >h2 {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }
  }

  &.success {
    border-color: #198754;

    >h2 {
      color: #fff;
      background-color: #198754;
      border-color: #198754;
    }
  }

  &.danger {
    border-color: #dc3545;

    >h2 {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }
  }

  &.warning {
    border-color: #ffc107;

    >h2 {
      color: #000;
      background-color: #ffc107;
      border-color: #ffc107;
    }
  }

  &.info {
    border-color: #0dcaf0;

    >h2 {
      color: #000;
      background-color: #0dcaf0;
      border-color: #0dcaf0;
    }
  }

  &.light {
    border-color: #eeeeee;

    >h2 {
      color: #000;
      background-color: #f8f9fa;
      border-color: #f8f9fa;
    }
  }

  &.dark {
    border-color: #212529;

    >h2 {
      color: #fff;
      background-color: #212529;
      border-color: #212529;
    }
  }

  >div {
    padding: 5px 15px;
  }
}
